/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <section class="content">
    <Header title="重要通知">
      <div slot="left" @click="goBack" style="width: 100%;height: 100%;text-align: center;">
        <i class="iconfont icon-arrow-left" style="font-size: 22px"></i>
      </div>
    </Header>
    <div class="main">
      <div ref="mescroll" class="mescroll">
        <ul id="dataList">
          <li class="item" v-for="(item,index) in infoList" :key="index" @click="goNewsDetail(item.id)">
            <div class="left">
              <p class="title">{{item.title}}</p>
              <p class="footer">
                <b class="red">{{item.viewed}}阅读</b>
                <b class="date">{{item.updateTime}}</b>
              </p>
            </div>
            <div class="right">
              <img :src="require('../../assets/img/home/bg_01.jpg')" alt>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </section>
</template>

<script>
import Header from "../../components/Header/Header";
import MeScroll from "mescroll.js";
import moment from "moment";
import { reqNewsList, reqNewsListTop } from "../../api/index.js";
export default {
  data() {
    return {
      infoList: []
    };
  },
  mounted() {
    self = this;
    self.mescroll = new MeScroll(self.$refs.mescroll, {
      down: {
        auto: true,
        callback: self.downCallback,
        textInOffset: "下拉刷新",
        textOutOffset: "松开立即刷新",
        textLoading: `<p>正在加载数据中...</p><p>最后更新: 今天${moment().format(
          "HH:mm"
        )}</p>`
      },
      up: {
        auto: false,
        page: {
          num: 1, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
          size: 10 // 每页数据的数量
        },
        callback: self.upCallback, //上拉回调
        isBounce: false, //此处禁止ios回弹,
        htmlNodata:
          "<p style='text-align: center; color: #ccc; font-size: 12px; padding: 10px;'>-- 没有更多数据了... --</p>",
        empty: {
          //配置列表无任何数据的提示
          warpId: "dataList",
          tip:
            "<p style='text-align: center; color: #ccc; font-size: 12px; padding: 10px;'>亲,暂无相关数据哦~</p>"
        }
      }
    });
  },
  methods: {
    goBack() {
      if (window.history.length <= 1) {
        this.$router.push({ path: "/" });
        return false;
      } else {
        this.$router.go(-1);
      }
    },
    // 下拉刷新
    async downCallback(mescroll) {
      const result = await reqNewsList({
        categoryId: 1,
        pageIndex: 1,
        pageSize: 10
      });
      if (result.code === 1) {
        this.infoList = result.data.items;
        this.$nextTick(() => {
          mescroll.endSuccess(result.data.total);
        });
      } else {
        this.$vux.toast.show(`获取免费列表失败:${result.msg}`);
        this.$nextTick(() => {
          mescroll.endErr();
        });
      }
    },
    // 上拉加载
    async upCallback(page, mescroll) {
      const result = await reqNewsList({
        categoryId: 1,
        pageIndex: page.num,
        pageSize: page.size
      });
      if (result.code === 1) {
        const arr = result.data.items || [];
        this.infoList = this.infoList.concat(arr);
        // 数据渲染成功后,隐藏下拉刷新的状态
        this.$nextTick(() => {
          mescroll.endSuccess(arr.length);
        });
      } else {
        this.$nextTick(() => {
          mescroll.endErr();
        });
      }
    },
    goNewsDetail(data){
      this.$router.push({ path: "/newsDetail", query: {id: data, title: 2} });
    }
  },
  components: { Header }
};
</script>

<style lang='less' scoped>
@import "../../util/theme.less";

.content {
  .be-full();
  .main {
    width: 100%;
    height: calc(~"100% - 46px");
  }
}

// item样式
.item {
  width: 100%;
  height: 90px;
  padding: 10px;
  background: @white;
  .mix-flex-center();
  border-bottom: 1px solid @border-base;
  .left {
    flex: 14;
    position: relative;
    height: 100%;
    margin-right: 15px;
    .title {
      font-size: 14px;
    }
    .footer {
      position: absolute;
      bottom: 0;
      font-size: 12px;
      color: @font-secondary;
      width: 100%;
      .read {
        float: left;
      }
      .date {
        float: right;
      }
    }
  }
  .right {
    flex: 7;
    position: relative;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
      border-radius: 5px;
    }
  }
}
</style>
